Multimedia Authoring

The Making of Vincent Knobil | MUSIC version 3

This post is going to delve into the gory details. You can cut to the chase and just visit the new version of my music site.

Still here? Proceed at your own risk.

How do you make your music available on the Internet when you’re a geeky songwriter?

Over the years, I’ve made it available on different platforms (Opsound, GarageBand (dead), SoundClick, Viinyl, SoundCloud, BandCamp, Dogmazic, etc., etc.)

These sites all have their pros and cons, and by definition, are impersonal.

So since the beginning of the Web, I’ve tried to serve my music up on my own site.

It started with some Flash players on my first site (over 10 years ago!).

Then, a couple of years ago, I decided to centralize the music that was scattered all over the web on a dedicated music site.

Because I like to design and code websites, I used all sorts of amusing tricks, like a parallax-scrolling background, a fixed logo with different sections sliding into place, an image slider to present song thumbnails, song popups, etc, etc.

My websites are an emanation of my creative self. While I care about usability, I don’t see my sites as mere marketing platforms. They are creations, for better or for worse.

In this case, the result was a bit too much of a (joyful) mess.

Then about a year ago, I built an iPhone web app, Pocket Vince, which uses HTML5 audio (no Flash allowed on iOS). I’ve wanted to redo my “regular” site using the same tech ever since.

So over time, I researched my options, and about a month ago, I took the plunge.

I had to overcome a lot of hurdles :

  • New design (while keeping the best of the v2 site, i.e. the randomized background color and motifs, and the simplicity of Pocket Vince).
  • Easy updating (updating my v2 site and PocketVince is horribly labor-intensive).
  • Less blabla. Direct access to music+lyrics.
  • Permalinks (so users could share links to individual songs). My v2 site was sorely lacking in this respect.
  • Converting all my .mp3 files to the OGG Vorbis format, since Firefox refuses to speak .mp3 (Fucker! And you don’t know how hard it is to find an .mp3 to .ogg converter for Mac).

I knew I could reause the Audio Player code from Pocket Vince pretty much as-is.

The big question was how to store and retrieve the song information (title, lyrics, backstory, cover image, audio file, etc.).

The obvious answer was a CMS of some kind. I used WordPress in the v2 site. But that seemed like overkill. I wanted something simpler (baking sites is all the rage these days).

I decided I would put the lyrics and stories in external files of some kind, which I’d call via AJAX (jQuery load() to be precise).

Then it occurred to me that my little Flash players stored the song info in little XML files. So why not use XML? As I looked into it…

…I stumbled on THE HOLY. FUCKING. GRAIL: XSLT.

XSLT files are like templates, which are used to specify WHAT XML content to display, and HOW to display it, on the fly.

So this snippet of XML:

<album>
	<name>A Great Album</name>
	<description>It really is a great album.</description>
</album>
<album>
	<name>A Lovely Album</name>
	<description>It really is a lovely album.</description>
</album>
...

Combined with this snippet of XSLT:

<xsl:for-each select="album">
	<h3><xsl:value-of select="name"/></h3>
	<p><xsl:value-of select="description"/></p>
</xsl:for-each>

Automagically outputs:

A Great Album

It really is a great album.

A Lovely Album

It really is a lovely album.

Best of all, this combo requires NO DATABASE, and no server-side language (PHP, ASP etc.). Indeed, all modern web browsers speak XML+XSL. So in the same way that your browser displays a pretty page when you feed it an HTML file and a CSS style sheet, it can render XML content processed through an XSL template.

I soon realized that given an exhaustive XML file and the appropriate XSL files, I could :

  • Generate the album+song list on the site.
  • Call up the right lyrics+story when listening to a song.
  • And even generate the playlist of MP3 files for a given album (with a little help from Javascript).

On. The. Fly.

And that’s exactly what I eventually managed to accomplish. No CMS. No database. The site just automagically assembles itself in real time.

If I fix a typo in the XML file, or add a song, boom, the site is updated.

I love this for the same reason real coders probably hate it: NO CODING REQUIRED!

Just markup.

But all along the way, I was confronted with my ignorance, and the fact that nobody on the InterWebs was using this technology in the way I wanted to.

I also needed a javascript (jQuery) plugin to bind XSLs to my XML. I built an entire first working version of the site with a plugin, only to discover that it broke under Internet Explorer 9.

I could go on and on, because I sweat every little detail, but there you have it: the first version of the third version of my music site.

I say first version, because XML+XSL open up many possibilities for additional features.

Colophon:

  • CSS written with CSSEdit.
  • Graphics made and processed with Fireworks CS3.
  • HTML, javascript, XML and XSL written with BBEdit.
  • There are dedicated XML editors out there, but they are HIDEOUS. If and when I do this again, I will buy Xmplify.
  • froogaloop jQuery plugin to control the Vimeo videos.
  • XML/XSL Transform by DAER Systems, a jQuery plugin to handle the XML + XSL binding with JQuery. Many thanks to Jason Iles for his help !

31. December 2011 by sknob
Destination: Geekiness, Multimedia Authoring | Leave a comment

Déboussolé, the video

03. January 2011 by sknob
Destination: Multimedia Authoring, Songs | Leave a comment

ioLexis | Vincent Knobil & Pamela Poole

26. February 2010 by sknob
Destination: Multimedia Authoring, Surfin', User Interface Design | Leave a comment

Introducing Vincent Knobil | MUSIC

Vincent Knobil | MUSIC

I’m proud to announce that my brand-spanking-new music-centric site is now online!

Until now, my music was sprinkled all over the Web.

I tried to make things a little easier on you by creating a My Music page on this blog, but it didn’t really change the fact that you had to surf to various sites to hear some of it.

The Geekette got on my case about this sad state of affairs (and rightly so).

So a few months ago, I began to reflect on how I might remedy the situation.

A lot of music sites are entirely Flash-based, and I didn’t want that, for many reasons (resource hog, horrible programming environment, etc.)

Other music sites amount to simple lists of download links, and I thought I could do better than that.

So in the end (after 2 or 3 months of tinkering in my spare time), I came up with a music-portfolio site, not unlike many art portfolios on line.

The user interface is, how should I put it, somewhat unconventional. However, it does have the following merits:

  • The entire site is on a single page! (though that may change over time). Load the page once, and you’re done.
  • The UI is, well, unconventional. I’m an artist after all, not a corporation hawking plastic doodads or a Web 2.0 outfit trying to sell, well, whatever it is that they sell…

And the UI is fun:

  • Try clicking on the big links on the right side of the page and watch what happens, in the foreground, and in the background.
  • Reload the page for different color/shape combinations.
  • And click on all the tabs and arrows everywhere for more dazzling javascript+CSS special effects.

As for the graphic design, well, you know by now that I like skewed.

I also decided right off the bat that I didn’t care to make the site compatible with the millions of corporate PCs still running Internet Explorer 6 (which arrogantly ignores Web-standards).

This was quite liberating. Design-wise, it meant I could go nuts with transparent PNG images, and that’s just what I did.

So there you have it, in a nutshell.

Relax, open your mind, and take some time to explore my new site‘s nooks and crannies.

And if you like it (or if you hate it), tell everyone you know about it!

UPDATE: Of course, as soon as it went online, I realized that I had missed a slew of bugs under Internet Explorer 7 & 8, and spent a whole day of panic fixing them (I thought IE8 handled CSS Opacity. It doesn’t). Creating a site, even the techy part, can be a pleasurable experience. Internet Explorer systematically ruins the fun. It’s like a fat, rude, obnoxious, selfish, foul-smelling asshole who crashes a groovy party, and starts burping and farting and making toilet jokes. Fuck you Microsoft.

07. November 2009 by sknob
Destination: Making Music, Multimedia Authoring | 1 comment

KJFG by Alexei Alexeev, via Drawn!

These animated shorts are the best I’ve seen in ages. The quality of the drawings and animation, and the strange, repetitive humor, made my day (be sure to check out all of the animations on the original Drawn post).

Posted via web from sknob’s posterous

13. October 2009 by sknob
Destination: Multimedia Authoring, Surfin' | Leave a comment

Geeks In Love: Redecorating

oldgeeks.jpg

When I designed the Geeks In Love site, I originally chose to go with a cold, techy design (a variation on the standard WordPress “Kubrick” design, appropriately enough), because I thought the contrast with the sloppy brushwork might be amusing.

But it didn’t take very long for me to become unhappy with it.

It did take me a long time however (about 90 episodes!) to do something about it.

Yesterday afternoon, around five-ish, I stumbled on a site that I liked, which suddenly inspired me to overhaul the Geeks In Love site.

So I entered the bubble.

By midnight, I had:

  1. finalized the design in Fireworks
  2. coded it in HTML+CSS, and
  3. transposed that code into my WordPress theme

Then this morning, I fired up the dreaded and hated Internet Explorer on the PC, and as usual, spent as much time ironing out the bugs as I did designing and recoding the entire site! (For you non-geeks out there, Internet Explorer doesn’t follow Internet standards the way other browsers do).

I went ahead and deployed the new design, even though I have 2 major unfixed bugs in IE, one that isn’t so visible (but it is to me!) and another glaring one.

I may or may not try to fix them again (trust me, I spent a lot of time trying already). If you’re using IE, you’re not a very discriminating user anyway, so there’s only so much I’m willing to do for you… Sorry.

So all in all, I say not so bad for less than 24 hours worth of work, including 6 hours of sleep.

The Geekette likes it too, but she’s not the most objective critic.

So please, let me know what you think!

(If you want to compare, you can click on the image above for a reminder of what once was).

01. February 2009 by sknob
Destination: Geekiness, Multimedia Authoring, User Interface Design | 2 comments

1 mot, 1 chanson: Design Notes

I wanted a grungy looking site for 1 mot, 1 chanson. With textures, and torn paper edges, and dirty scotch-tape, and ink blotches, and fingerprints, and coffee rings, and, well, you get the idea.

So I went scouring the WordPress web looking for inspiration, and ended up using Modicus by Upstart Blogger.

I couldn’t be any farther from grunginess.

Oh well, I seem to gravitate towards clean designs (see télétravail 2.0). I can’t help it.

While I love Modicus for it’s clean look and its use of empty space and its original layout, it had a near-fatal flaw. Links had at least three different stylings.

After many unsuccessful attempts at harmonizing the links without destroying the design, I decided to simply underline them, to make it clearer what is clickable or not.

Duh!

And I tweaked the design in many other small ways, while translating it into French.

And then, there’s the little Flash music player I custom designed for the site.

What can I say. I LOVE my new Flash player. The silly but subtle and cool 3D effect when you click on the button, the way the two gauges fill up the whole player, sweeping from left to right, while the text sweeps from right to left, ducking under the button. It absolutely DELIGHTS me.

Even if the site goes nowhere, I’ll always have the player…

25. April 2008 by sknob
Destination: Multimedia Authoring, User Interface Design | Leave a comment

Francophilia dot com

Well, the cat’s out of the bag.

Pamela just unveiled her latest creation. You can read all about it on her blog.

Francophilia is a niche social-networking site, for francophiles, something she’s been meaning to do for years.

My involvement is more recent.

I spent the last couple of weeks putting a fresh coat of paint on her site, which is built on an open-source, PHP+MySQL software package.

As is usually the case with such things, the default design, out of the box, is pretty boring and/or ugly, although I’ve seen worse.

It is also made up of literally hundreds of .css style sheets and images in dozens of folders, all tied in to hundreds of .php files.

There wasn’t any question of truly designing the site from scratch. It was more a case of giving it a total makeover: a new hair color, French nails, fake eyelashes, a bikini-wax, that sort of thing.

So I patiently learned my way around the maze of folders and files, and with the help of my trusty and invaluable sidekicks CSSEdit, BBEdit, and Fireworks, spent hours modifying style sheets, designing icons (based on these “Sanscons” icons by Some Random Dude) and tracking down the occasional hard-coded design elements in the .php files.

And though I’m no PHP programmer, I even ended up fixing a few functional bugs in the code, too.

Now I’m no Francophile (I’m French, there’s a difference), and I certainly am not into social networking of any kind (I’m always quoting Groucho’s famous line that goes “I don’t care to belong to any club that will have me as a member”). As a rule, I also tend to manage my expectations by expecting the worst, while accepting that a positive outcome isn’t entirely out of the realm of possibilities.

But I have to say that I’m quite happy with the result (although I have to question my addiction to #FF6600 orange), and I’m eager to find out how Francophlia will fare out there in the open cyber-range.

So do go and check it out, for the design of course, but please don’t join the site unless you are a true Francophile (whatever that may be) or we’ll have to ruthlessly prune your account, ban your IP address, and other such cool things that all-powerful site designers and administrators have the power to inflict.

13. October 2007 by sknob
Destination: Multimedia Authoring, User Interface Design | 1 comment

OZÉ: Welcome to your Home 2.0

OZÉ is a venture I’ve been involved with for a long time. A new version of their website came online just a few minutes ago.

I should know, since I designed it, and put it there :).

Yes, OZÉ is still alive and kicking, and some of the products actually exist. Hopefully, they will soon be unveiled to the general public, but in the meantime, the site will give you some idea of what they are about.

02. March 2007 by sknob
Destination: Multimedia Authoring, User Interface Design | Leave a comment

Boing Boing: Idol – amazing animated short film

Boing Boing: Idol – amazing animated short film.

There’s a ton of animated content on the Web, and most of it is pretty uninteresting.

This on the other hand, truly is mesmerizing. As Boing Boing says, it is very creepy, but the animation is superb, and the construction, graphics, ambiance and cinematography are perfect.

Wow.

14. October 2006 by sknob
Destination: Multimedia Authoring, Surfin' | Leave a comment

tiny Radio Vince

Hot on the footsteps of Radio Vince and mini Radio Vince (at the top of this page), here comes tiny Radio Vince, which I will henceforth use to allow playback of a single song.

Thanks to tiny Radio Vince, you won’t have to wade through 30 plus songs to listen to my new releases, and you can play several songs at once on the same page if the experimental D.J. in you is aching for some action.

I’ll be updating the relevant posts on sknoblog (which you can find under the Songs category in the sidebar), but in the mean time, here’s an example.

25. September 2006 by sknob
Destination: Making Music, Multimedia Authoring, Site News, User Interface Design | Leave a comment

Microsoft Hell

Haven’t been inspired to blog much. I’ve been too busy with work and my new life.

I’ve been translating a lot, on my new MacBook, which has worked flawlessly so far. The only problems I’ve run into are Windows bugs, “features”, and general bad ergonomics, hallucinatingly complex workflows to achieve the simplest tasks, etc. Besides that, there’s not much more to tell, which is a good sign!

I’ve also been contracted to design a logo and to do the graphic design (!!!) of a web site (some medical billing company).

I foolishly decided to use the Cascading Style Sheet W3C standard to do the web page layout. In a nutshell, this allows you to separate the content of a page from the layout instructions that tell your web browser how to display that content in the browser window. This makes it infinitely easier to edit content, much harder to break the layout when editing content, and also allows you to control the layout and appearance of every page of a site from a single, external CSS file that contains all of the layout and appearance instructions.

Again, it worked flawlessly.

Until I opened the pages in Internet Explorer for Windows.

The site was completely broken. I then spent 2 full days scouring the Web trying to figure out what was going on. It quickly became clear that IE Win simply does not honor CSS positioning (and doesn’t intend to in its new version 7). It has its own “standard,” which is less versatile, and doesn’t work with any other browser. So as usual with Microsoft, you are forced to use their “standard” (and shut everyone else out) or to cripple your site by removing standard CSS features that every other browser could easily display (in effect, torpedoing the “competing” standard).

I was genearally aware of this situation, and I know that the WordPress-based sknoblog doesn’t work properly on IE Win (the left sidebar floats to the bottom of the page instead of the top, so IE Win users have probably never seen it!) but I figured my enligntened readership either use the vastly superior FireFox browser, or Apple’s Safari if they use Macs. So I really hadn’t bothered to investigate or fix the problem and didn’t realize how bad things really are.

Indeed, what I then discovered, to my utter amazement and dismay, is that every major site on the Internet that uses CSS for page layout (and most of them do), includes incredibly convoluted workarounds to make the pages display more or less properly in IE, often relying on undocumented “hacks”. These workarounds and hacks however, are extremely limited in what they can achieve, and require doubling or tripling the HTML / CSS code, adding tons of JavaScript, which pretty much defeats the whole purpose of using CSS in the first place (simpler, easier to manage, more efficient code).

I’ll spare you a couple of paragraphs on the fact that IE Win doesn’t display transparent .PNG graphics.

I did end up getting my site to layout properly in IE Win, and yes, this required adding many IE-specific instructions in my CSS file. Unfortunately, one nifty, CSS-dependant feature included in my design proposal (a static navigation menu that always stays in the same spot on the Web page, even when you scroll the contents), can’t work in IE as advertised. And of course, my client loved that feature, and is really bummed that it doesn’t work in IE. It’s just one line of CSS (“position: fixed;”). I found javascripts, some of them containing hundreds of lines of code, that try to achieve the same effect in IE, but that have various limitations, flaws, or bugs, and require customization beyond my technical abilities.

Throughout this ordeal, I went through the classic 5 stages (denial, anger, bargaining, depression, acceptance), punctuated by continual cursing at Microsoft, and at all the unsuspecting Windows users who make Microsoft rich and powerful despite its piss-poor, flawed, hilariously complex, dangerous products combined with its agressive monopolistic tactics, etc. (And yes, I do realize I’ve probably just insulted 90% of my readership).

Pamela, a poor, unsuspecting Windows user, who had to bear my grief and anger and ranting, was quite shocked to discover how much simpler and more efficient workflows are on Mac OS X and how much better non-MS browsers behave, and is geeky enough to appreciate the scandalous nature of the status quo…

Interestingly, my client liked and accepted unconditonally one of my logo designs, and my proposed Web site design. But the whole process is now stalled because of this one, major marketing mistake on my part: I shouldn’t have included my spiffy navigation feature that doesn’t work in IE which my client now wants so badly.

I should have crippled my design instead.

22. July 2006 by sknob
Destination: Geekiness, Multimedia Authoring, User Interface Design | Leave a comment

← Older posts